<template>
  <div class="flex flex-col h-full">
    <vxe-card title="" class="w-full" :border="false">
      <AuForm ref="formRef" :formList="formList" @submit="search" />
    </vxe-card>

    <div class="flex-grow overflow-hidden mt-4">
      <AuTable ref="tableRef" v-bind="gridOption" @actionClick="actionClick" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { AuTable } from "@/components/AuTable";
import { AuForm } from "@/components/AuForm";
import {
  ACTION_TYPE,
  ObjectProps,
  PropDefines
} from "@/components/AuTable/type";
import { FormulaListProp } from "@/api/teaInfuser/formula";

defineOptions({
  name: "MaterialData"
});

// region 声明ref变量集合
const formList = ref([]);
const gridOption = reactive<PropDefines>({
  isServerPage: true,
  columns: [
    { field: "device_id", title: "设备编码" },
    { field: "store_name", title: "门店名称" },
    {
      field: "device_status",
      title: "设备状态",
      slots: { default: "status_default" }
    },
    { field: "activation_time", title: "激活/锁机时间" }
  ],
  actions: [],
  operateTools: [
    // {
    //   icon: "material-symbols:move-item-sharp",
    //   key: "move",
    //   name: "table.telRelocation",
    //   disableHandle: (row: DeviceProp) =>
    //     !(row.device_status == 0 && row.store_id != null)
    // }
  ],
  dataSource: [],
  fetchConfig: {
    query: {
      service: (params: ObjectProps) => {
        return new Promise(resolve => {
          resolve([]);
        });
      },
      param: () => formRef.value.getFormData()
    }
  }
});

const formRef = ref();
const tableRef = ref();
// endregion

// region 公共方法的集合

// endregion

// region 组件事件的集合
const search = () => {
  tableRef.value.refresh();
};

type ActionType = {
  key: ACTION_TYPE;
  row: FormulaListProp;
};
const actionClick = ({ key, row }: ActionType) => {
  console.log(key, row);
};
// endregion
</script>
